<template>
  <div>
    <el-form :model="tableData" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
      <el-card class="box-card">
        <span>基本信息</span>
        <div class="text item">
          <el-form-item label="编号">
            <el-input v-model="tableData.number" :maxlength='20' disabled></el-input>
          </el-form-item>
          <el-form-item label="上游名称" prop="name">
            <el-input v-model="tableData.name" :maxlength='30' :disabled="dialogSendData.isAdd"></el-input>
          </el-form-item>
          <el-form-item label="上游类别" prop="type">
            <el-select v-model="tableData.type" placeholder="请选择上游类别" :disabled="dialogSendData.isAdd">
              <el-option label="请选择上游类别" value="">
              </el-option>
              <el-option v-for="(item,index) in upTypeMap " :label="item" :value="index" :key="index">
              </el-option>
            </el-select>
          </el-form-item>

          <pinpai  v-if="code"  :dealerArray="dealerArray"  :id="tableData.brandIds"  @pinpai="checkPinpai" :isDisabled="dialogSendData.isAdd"  :Choice="true" ></pinpai>
           <el-form-item label="*注册区域"   class="v-distpicker-width" prop="provinceNid">
				    <countySelect v-if="code"  :provinceNid="tableData.provinceId" :cityNid="tableData.cityId" :countyNid="tableData.countyId"  :isDisabled="dialogSendData.isAdd" v-on:receive-city-data="receiveCityData" ></countySelect>
			    </el-form-item>
        
        <el-form-item label="具体地址" prop="address">
            <el-input v-model="tableData.address" :maxlength='30' :disabled="dialogSendData.isAdd"></el-input>
          </el-form-item>
          <el-form-item label="成立日期" prop="bulidDate">
            <el-date-picker :editable="false" v-model="tableData.bulidDate" type="date" :picker-options="endDateOpt" placeholder="选择日期" :disabled="dialogSendData.isAdd">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="资质图片">
                <qiniu :qiniuImage="qiniuImage" :packJson="packJson" :id="qiniuImage.id"  :canDelete="!dialogSendData.isAdd"></qiniu>
          </el-form-item>


        <template  v-if="this.dialogSendData.isMsg=='look'" >
             <el-form-item label="添加人">
            <el-input v-model="tableData.createName" disabled ></el-input>
          </el-form-item>
           <el-form-item label="创建时间">
            <el-input :value="getDate(tableData.createTime)"  disabled></el-input>
          </el-form-item>
           <el-form-item label="最后修改人">
            <el-input v-model="tableData.updateName" disabled></el-input>
          </el-form-item>
           <el-form-item label="最后修改时间">
            <el-input :value="getDate(tableData.updateTime)"  disabled></el-input>
          </el-form-item>
        </template>

        </div>
      </el-card>

      <el-form-item class='align'>
        <el-button type="primary" @click="resetForm('ruleForm')">返回</el-button>
        <el-button type="success" @click="submitForm('ruleForm')" v-if='!dialogSendData.isAdd'>提交</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
  import {
    require,
    prop,
    decimalTwo,
    muchVerification,
    phone
  } from '@/utils/rules.js' //表单验证规则
  import agentHttp from '@/utils/agentHttp.js'
  import {qiniuArray,timestampToTime} from '@/utils/index.js'
  import pinpai from "@/views/pinpai/pinpai";
    import qiniu from '@/views/qiniu/upload';
    import Map from "@/views/map/index";
    import countySelect from '@/views/countySelect/index.vue'
  export default {
    data() {
      return {
        tableData: {
            
          "address ": "", //具体地址
          "brandIds": "", //主营品牌ID 
          "bulidDate": "", //成立日期
          "cityId": "", //市ID 
          "countyId": "", //县ID
          "name": "", //上游供应商名称 ,
          "pic": "", //资质图片
          "provinceId": "", // 省ID 
          "type": "", //类别
          "supplierPerson": "", //上游供应商联系人
          "supplierPhone": "", //上游供应商联系电话
          "totalPrice": "", //成交单价
        },
        selectProvince:[],  //地图
        dealerArray:[],     //经销商
         qiniuImage: {
          id: "qiniuImage",
          image_uri: []
        },
         packJson: {
          maxLength: 50, //最大图片数量
          accept: "", //image/gif,image/jpeg,image/jpg,image/png如果是这些，可以不传此参数
          size: 4 //图片大小  单位兆
        },
        code: false, 
        specificationName: null,
        price: null,
        dealerArray: [],
        mapId:{},
        rules: {
          name: [require("上游名称")],
          type: [require("上游类别")],
          address: [require("具体地址")],
        },
        endDateOpt:{
          disabledDate:(time)=>{
            var timestamp=new Date().getTime()+86400000;       //864代表一天
            var timestamp=new Date().getTime();       //864代表一天
            return  time.getTime() >  timestamp
          }
      },
      }
    },
    methods: {
      submitForm(formName) { //提交数据
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.dialogSendData.isMsg == "edit") {
              //修改
             this.tableData.pic = this.qiniuImage.image_uri.join(",") ;

              const getType = Object.prototype.toString ;       //判断数据类型；
             
              getType.call(this.tableData.brandIds)=="[object Array]"?this.tableData.brandIds = this.tableData.brandIds.toString():null;

              agentHttp.putJson(`adminApi/admin/up_supplier/update`, this.tableData).then(data => {
                if (data.success) {
                  this.dialogSendData.isCode = false;
                  this.$message.success(data.data || "修改成功");
                  this.$emit('Refresh', null);
                }
              })
              return
            }
          
             this.tableData.pic = this.qiniuImage.image_uri.join(",") ;

             if ( this.tableData.provinceId==""){
               this.$message.success("请填写注册区域");
               return 
             }
            agentHttp.postJson(`adminApi/admin/up_supplier/add`, this.tableData).then(data => {
              if (data.success) {
                this.dialogSendData.isCode = false;
                this.$message.success(data.data || "添加成功");
                this.$emit('Refresh', null);
              }
            })
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.dialogSendData.isCode = false;
      },
      initData() { //初始化数据
        agentHttp.get(`adminApi/admin/up_supplier/view/${this.dialogSendData.id}`).then((data) => {
          if (data.success) {
            this.code = true ;
            this.tableData = data.data.view ;
            this.qiniuImage.image_uri =  data.data.view.pic ? data.data.view.pic.split(',').notempty() : []
             this.tableData.brandIds = this.tableData.brandIds.split(',');
          }
        })
      },
       select_get_id(id) { //加载经销商,匹配logo
        agentHttp.get(`adminApi/admin/dictionary/find_all_car_brand`).then((data) => {
          if (data.success) {
            var t =new RegExp(",");
            this.dealerArray = data.data
             data.data.map((res,index)=>{
                if(t.test(res.icon)){
                     this.dealerArray[index].icon =    res.icon.substring(0,res.icon.length-1)
                }
            })
          }
        })
      },
       checkPinpai(e){     //选择主营品牌
          this.tableData.brandIds = e.toString() ;
      },
       getDate(time){
        return timestampToTime(time)
      },
      changeIds(id){
        // this.tableData.provinceId = id.provinceId ;
        // this.tableData.cityId = id.cityId ;
        // this.tableData.countyId = id.countyId ;
        // this.mapId = id ;
      },
      receiveCityData(province,city,county){ //依次为 省：{id:"",name:""}   市:{id:"",name:""}  区:{id:"",name:""}
				this.tableData.provinceId=province.id;
				this.tableData.cityId=city.id;
        this.tableData.countyId=county.id;	

			},

    },
    props: {
      dialogSendData: {
        type: Object
      },
      upTypeMap:{
        type:Object
      }
    },
    mounted() {
      this.select_get_id();
      switch (this.dialogSendData.isMsg) {
        case "edit":
          this.initData()
          break
        case "add":
          this.code = true;
          break
        case "look":
          this.initData()
        default:
          break;
      }
    },
    components: {
          pinpai,qiniu,Map,countySelect
    },
  };
</script>

<style lang="scss" scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }

  .box-card {
    margin-top: 20px;
  }

  .align {
    margin: 50px auto 0;
    text-align: center;
  }
  .el-popover,.el-popovers{
  height:800px !important ;
  overflow:scroll !important;
}
</style>
